<template>
  <div class="technology">
        <!-- content block 1 -->
        <div class="content-block b-one">
      <h3 class="title t-one">用户进入数字资产时代</h3>
      <div class="desc-wrap">
        <p class="desc">存量经济下，获客成本高昂，消费诉求多元，</p>
        <p class="desc">
          企业需与用户全场景、高效地连接互动，建立用户资产并持续流量变现，才能抢占商业先机。
        </p>
      </div>
      <img
        class="chart-img"
        src="~/static/img/technology/digital-technology-chart@2x.png"
        alt=""
      />
    </div>

    <!-- content block 2 -->
    <div class="content-block b-two">
      <h3 class="title t-one">全场景数字运营</h3>
      <div class="desc-wrap">
        <p class="desc">精准连接每一位用户，持续变现商业价值</p>
      </div>
      <!-- content-card -->
      <div class="card-wrap">
        <div class="card c-one">
          <h2 class="title">全场景连接</h2>
          <div class="desc-wrap">
            <p class="desc">提供各类型平台工具</p>
            <p class="desc">场景开发及内容运营</p>
          </div>
          <span class="sub-title">立咕应用</span>
        </div>

        <div class="card c-two">
          <h2 class="title">低成本互动</h2>
          <div class="desc-wrap">
            <p class="desc">提供品牌虚拟权益资源库和</p>
            <p class="desc">兑换服务，低成本高效促活</p>
          </div>
          <span class="sub-title">立咕e权益</span>
        </div>

        <div class="card c-three">
          <h2 class="title">高效率转化</h2>
          <div class="desc-wrap">
            <p class="desc">提供营销策划、运营、</p>
            <p class="desc">落地服务，精准用户洞察</p>
          </div>
          <span class="sub-title">中琛有量</span>
        </div>
      </div>
    </div>

    <!-- content block 3-->
    <div class="content-block b-three">
      <h3 class="title t-one">全链式数智化升级</h3>
      <div class="desc-wrap">
        <p class="desc">
          助力企业实现用户管理、运营、营销、决策的数字化和智能化
        </p>

        <div class="cell-box-wrap">
          <div class="cell-box"></div>
          <div class="cell-box">
            <p class="cell-box-title">零售商超</p>
            <p class="cell-box-desc">
              扫码溯源领积分兑好礼，实现 线下流量线上汇聚，提高品牌 人气
            </p>
            <img class="cell-box-img" width="166px" height="98px" src="static/image/cell-img-2@2x.png" />
          </div>
          <div class="cell-box"></div>
          <div class="cell-box">
            <p class="cell-box-title">金融银行</p>
            <p class="cell-box-desc">
              提供大量积分卡券商品，面向 广泛银行客户提供增值权益服 务，保持品牌黏性
            </p>
            <img class="cell-box-img" width="166px" height="98px" src="static/image/cell-img-4@2x.png" />
          </div>
          <div class="cell-box">
            <p class="cell-box-title">通信服务</p>
            <p class="cell-box-desc">
              策划秒杀抽奖等活动盘活联通 积分，结合实物礼品刺激用户 持续参与热情
            </p>
            <img class="cell-box-img" width="153px" height="83px"  src="static/image/cell-img-5@2x.png" />
          </div>
          <div class="cell-box"></div>
          <div class="cell-box">
            <p class="cell-box-title">餐饮娱乐</p>
            <p class="cell-box-desc">
              策划“去哪儿吃饭”等积分营 销活动，为品牌大量引流，增 强用户活跃度和品牌黏性
            </p>
            <img class="cell-box-img" width="200px" height="82px"  src="static/image/cell-img-7@2x.png" />
          </div>
          <div class="cell-box"></div>
          <div class="cell-box"></div>
          <div class="cell-box">
            <p class="cell-box-title">生活消费</p>
            <p class="cell-box-desc">
              定制客户积分卡券系统，对接 积分商城，为品牌大量引流获 客，追踪用户行为数据
            </p>
            <img class="cell-box-img" width="252px" height="86px"  src="static/image/cell-img-10@2x.png"  />
          </div>
          <div class="cell-box"></div>
          <div class="cell-box">
            <p class="cell-box-title">实体门店</p>
            <p class="cell-box-desc">
              无缝对接积分商城与线下门店， 实现线上消费线下体验，带动 门店客流增长
            </p>
            <img class="cell-box-img" width="96px" height="96px" src="static/image/cell-img-12@2x.png"/>
          </div>
        </div>
        <div class="btn-wrap">
          <div class="enter-btn">进入官网</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.head-block {
  height: 520px;
  width: 100%;
  background: url(~/static/img/technology/digital-technology@2x.png) no-repeat;
  background-size: contain;
}

.head-block .title {
  padding-top: 230px;
  padding-left: 341px;
  font-size: 58px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #ffffff;
}

.head-block .sub-title {
  padding-top: 14px;
  padding-left: 341px;
  font-size: 34px;
  font-family: Microsoft YaHei;
  color: #ffffff;
}

.navbar {
  display: flex;
  width: 100%;
  padding-left: 520px;
  line-height: 84px;
  background: #ffffff;
  border-bottom: 2px solid rgba(102, 102, 102, 0.2);
}

.navbar .bar-item {
  margin-right: 157px;
}

.navbar .bar-item:last-child {
  margin-right: 0;
}

.navbar .bar-item a {
  font-size: 24px;
  font-family: Microsoft YaHei;
  color: #666666;
}

.navbar .bar-item.active a {
  color: #0083ce;
}

.content-block.b-one {
  height: 1069px;
  margin: auto 485px;
}

.content-block > .title {
  position: relative;
  text-align: center;
  font-size: 34px;
  font-family: Microsoft YaHei;
  color: #333333;
}

.content-block > .title.t-one {
  padding-top: 101px;
}

.content-block > .title:after {
  position: absolute;
  content: " ";
  left: calc(50% - 30px);
  bottom: -27px;
  width: 60px;
  height: 4px;
  background: #0083ce;
  border-radius: 2px;
}

.content-block .desc-wrap {
  margin-top: 59px;
  margin-bottom: 62px;
}

.content-block .desc-wrap .desc {
  text-align: center;
  font-size: 18px;
  font-family: Microsoft YaHei;
  color: #737373;
}

.content-block .chart-img {
  width: 947px;
  height: 658px;
}

.content-block.b-two {
  height: 819px;
  background: #fafafa;
  padding: auto 230px;
}

.content-block > .title.t-two {
  padding-top: 111px;
}

.content-block .card-wrap {
  display: flex;
  padding: 0 230px;
  justify-content: space-between;
}

.content-block .card-wrap .card {
  width: 440px;
  height: 400px;
  border-radius: 25px;
  border: none !important;
}

.content-block .card-wrap .card .title {
  margin-top: 97px;
  text-align: center;
  font-size: 22px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #0083ce;
}

.content-block .card-wrap .card .desc-wrap {
  margin-top: 41px;
  margin-bottom: 73px;
  color: #737373;
}

.content-block
  .card-wrap
  .card
  .desc-wrap:hover，
  .content-block
  .card-wrap
  .card
  .title:hover {
  color: #ffffff;
}

.content-block .card-wrap .card .desc {
  text-align: center;
  font-size: 18px;
  font-family: Microsoft YaHei;
  color: #737373;
}

.content-block .card-wrap .card .sub-title {
  display: inline-block;
  text-align: center;
  font-size: 18px;
  font-family: Microsoft YaHei;
  border-top: 2px solid #666666;
  border-bottom: 2px solid #666666;
  display: inline-block;
  padding: 6px 0;
}

.content-block .card-wrap .card.c-one {
  background: url(~/static/img/technology/card-img-1@2x.png) no-repeat;
  background-size: contain;
}

.content-block .card-wrap .card.c-one:hover {
  background: url(~/static/img/technology/card-img-1-hover@2x.png) no-repeat;
  background-size: contain;
}

.content-block .card-wrap .card.c-two {
  background: url(~/static/img/technology/card-img-1@2x.png) no-repeat;
  background-size: contain;
}

.content-block .card-wrap .card.c-two:hover {
  background: url(~/static/img/technology/card-img-1-hover@2x.png) no-repeat;
  background-size: contain;
}

.content-block .card-wrap .card.c-three {
  background: url(~/static/img/technology/card-img-1@2x.png) no-repeat;
  background-size: contain;
}

.content-block .card-wrap .card.c-three:hover {
  background: url(~/static/img/technology/card-img-1-hover@2x.png) no-repeat;
  background-size: contain;
}

.content-block.b-three {
  height: 1641px;
  padding: auto 227px;
}

.content-block .cell-box-wrap {
  margin-top: 53px;
  padding: 0 219px;
  display: flex;
  flex-wrap: wrap;
}

.content-block .cell-box-wrap .cell-box {
  box-sizing: border-box;
  padding: 53px 63px 46px 67px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 366px;
  height: 366px;
}

.content-block .cell-box-wrap .cell-box .cell-box-title {
  font-size: 22px;
  font-family: Microsoft YaHei;
  color: #0083ce;
}

.content-block .cell-box-wrap .cell-box .cell-box-desc {
  font-size: 18px;
  font-family: Microsoft YaHei;
  color: #737373;
}

.content-block .cell-box-wrap .cell-box:nth-child(1) {
  background: url(~/static/img/technology/cell-img-8@2x.png) no-repeat;
  background-size: contain;
}
.content-block .cell-box-wrap .cell-box:nth-child(3) {
  background: url(~/static/img/technology/cell-img-3@2x.png) no-repeat;
  background-size: contain;
}

.content-block .cell-box-wrap .cell-box:nth-child(6) {
  background: url(~/static/img/technology/cell-img-6@2x.png) no-repeat;
  background-size: contain;
}
.content-block .cell-box-wrap .cell-box:nth-child(8) {
  background: url(~/static/img/technology/cell-img-8@2x.png) no-repeat;
  background-size: contain;
}

.content-block .cell-box-wrap .cell-box:nth-child(9) {
  background: url(~/static/img/technology/cell-img-9@2x.png) no-repeat;
  background-size: contain;
}

.content-block .cell-box-wrap .cell-box:nth-child(11) {
  background: url(~/static/img/technology/cell-img-11@2x.png) no-repeat;
  background-size: contain;
}

.content-block .btn-wrap {
  margin-top: 82px;
}

.content-block .btn-wrap .enter-btn {
  margin: 0 auto;
  width: 240px;
  line-height: 80px;
  border: 2px solid #0384ce;
  border-radius: 25px;
  text-align: center;
  color: #0384ce;
  cursor: pointer;
}

</style>